ul li {
  list-style: none;  
}

#box {
  width:600px;
  height:600px;
 
}

.flat {
  position:relative;
  width:100px;
  height:200px;
  left:50%;
  top:50%;
  float:left;
  background-color: grey;
  transform-style: preserve-3d;
  perspective: 2000px;
  margin-top: -100px;
}

#flat1 {
  margin-left: -200px;
  
}
#flat2 {
  margin-left: -100px;
  
}

#flat4 {
  margin-right: -100px;
  
}

input {
  position: fixed;
  left:50%;
  margin-left:-100px;
}

li {
  
  position: absolute;
  left:0;
  top:0;
  width:100px;
  height:200px;
  text-align: center;
  line-height: 200px;
}



.flat li:nth-child(1)
{
  
  transform: translateZ(100px);
}

.flat li:nth-child(2)
{
  
  transform: rotateX(90deg) translateZ(100px);
}

.flat li:nth-child(3)
{
 
  transform: rotateX(180deg) translateZ(100px);
}

.flat li:nth-child(4)
{
 
  transform: rotateX(270deg) translateZ(100px);
}  
.flat li:nth-child(5)
{

  transform: rotateY(-90deg) translateZ(50px);
}

.flat li:nth-child(6)
{
 
  transform: rotateY(90deg) translateZ(50px);
  
}